<template>
  <div class="app-container">
    <!-- 查询 -->
    <tl-list-search ref="search" :query-param="queryParam" @search="doSearch(queryParam)" :isDisplayDefaultSearch="false" :isDisplaySearch="false" v-if="isHeaderDisplay && activeName === 'first'">
      <template slot="search">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键信息" prop="name">
              <el-input v-model="queryParam.qry_name" placeholder="输入主题/标签" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会议类型">
              <el-cascader v-model="meetType" :options="meetTypeList" filterable @change="handleMeetTypeChange" clearable ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="会议时间"> <el-date-picker ref="datePicker" v-model="meettimerange" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="meetTimeChange"> </el-date-picker> </el-form-item>
          </el-col>
           <el-col :span="2">
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="doSearch(queryParam)" >搜索</el-button>
          </el-col>
        </el-row>
      </template>
    </tl-list-search>

    <!-- 查询 -->
    <tl-list-search ref="peroidSearch" :query-param="queryParamPeroid" @search="doSearch(queryParamPeroid)" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay && activeName === 'second'">
      <template slot="search">
        <el-form-item label="关键信息" prop="name">
          <el-input v-model="queryParamPeroid.qry_name" placeholder="输入主题/标签"></el-input>
        </el-form-item>
        <el-form-item label="会议类型">
          <el-cascader v-model="meetType" :options="meetTypeList" filterable @change="handleMeetTypeChange" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="周期类型">
          <el-select v-model="queryParamPeroid.qry_periodtype" filterable clearable>
            <el-option v-for="item in codeModel.periodtypeList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
      </template>
    </tl-list-search>
    <!-- 工具栏 -->
    <tl-list-toolbar ref="toolbar" @add="openAddDialog(editComp)" @exportExcel="doExportExcel" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :isDisplayDeleteBatch="false" :isDisplayExport="false">
      <template slot="left-btn"> </template>
    </tl-list-toolbar>
    <div>
      <tab-table-comp ref="tabTab" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" :tab-height="tableHeight" @activeTab="activeTab"></tab-table-comp>
      <tl-edit ref="editForm" @refresh="doRefresh" sourceType="meetCreate"></tl-edit>
      <tl-period-edit ref="periodEdit" @refresh="doRefresh" ></tl-period-edit>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from "@tapui/mixins/mixin_list"
/** 子组件 */
import { formatDate } from "@tapui/utils/date"
import tlEdit from "./edit"
import TlPeriodEdit from "@/views/meet/meetPeroidTask/edit"
import tlRefMeetType from "../meetTypeManage/refMeetType"
import tlCascader from "@/components/common/cascader"
import tabTableComp from "@/views/meet/meetManage/tabTableComp"
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"
export default {
  name: "meetManage",
  mixins: [mixin_list],
  components: { tlEdit, tlRefMeetType, tlCascader, tabTableComp, TlPeriodEdit },
  computed: {
    editComp() {
      return this.activeName === "first" ? "editForm" : "periodEdit"
    }
  },
  data() {
    return {
      description: "会议管理-列表查询",
      urlPrefix: "/meet/meetManage/",
      url: {
        queryCodeList: "/meet/meetManage/dataCodeList",
        queryMeetTypeList: "/meet/typeManage/queryTreeList",
        queryPeroidTaskList: "/meet/peroidTask/list"
      },
      // 排序参数
      sorterInfo: {
        sidx: "begintime asc,id",
        sord: "desc"
      },
      // 查询创建者
      queryParam: { qry_isall: "0" },
      meetType: [],
      meetTypeList: [],
      isQueryOnCreated: false,
      meettimerange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "过去一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "过去一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "过去三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            }
          }
        ]
      },
      // 默认展示的页签
      activeName: "first",
      tabName: {
        normalMeet: "first",
        periodMeet: "second"
      },
      // 用于计算表格要扣除的元素高度
      tableResizeRefs: ["search", "toolbar", "peroidSearch"],
      isHeaderDisplay: true,
      queryParamPeroid: {}
    }
  },
  methods: {
    /** 限制删除*/
    doLimitDelete(data) {
      if (data.state === 1 || data.state === 2) {
        this.$tap.alert("已经发布的会议不允许删除！", "warning")
        return
      }
      this.doDelete(data.id)
    },
    /** 批量删除 */
    doLimitDeleteBatch() {
      let isExistPublish = false
      if (this.selectedRowKeys.length <= 0) {
        this.$tap.alert("请选择记录！", "warning")
        return
      } else {
        for (var index = 0; index < this.selectionRows.length; index++) {
          if (this.selectionRows[index].state === 1 || this.selectionRows[index].state === 2) {
            isExistPublish = true
          }
        }
      }
      if (isExistPublish === true) {
        this.$tap.alert("已经发布的会议不允许删除！请重新选择", "warning")
        return
      } else {
        this.doDeleteBatch()
      }
    },
    handleMeetTypeChange(value) {
      this.queryParam.qry_meettypeid = value[value.length - 1]
      this.queryParamPeroid.qry_meettypeid = value[value.length - 1]
    },
    meetTimeChange(value) {
      if (value == null) {
        this.queryParam.qry_begindatetime = ""
        this.queryParam.qry_enddatetime = ""
      } else {
        this.queryParam.qry_begindatetime = value[0]
        this.queryParam.qry_enddatetime = value[1]
      }
      this.$nextTick(() => {
        this.doRefresh()
      })
    },
    // 切换tab页
    activeTab(data) {
      this.activeName = data
    },
    doSearch(param) {
      this.$refs.tabTab.doSearch(param)
    },
    doRefresh() {
      if (this.activeName === this.tabName.normalMeet) {
        this.doSearch(this.queryParam)
      }
      if (this.activeName === this.tabName.periodMeet) {
        this.doSearch(this.queryParamPeroid)
      }
    }
  },
  activated() {
    if (this.meettimerange) {
      this.doRefresh()
    }
  },
  created() {
    /** 查询树 */
    getAction(this.url.queryMeetTypeList, { isAddRoot: false }).then(res => {
      if (res.success) {
        let reg = new RegExp("id", "g") // g代表全部
        this.meetTypeList = JSON.parse(JSON.stringify(res.result.dataList).replace(reg, "value"))
      }
    })
    this.$nextTick(_ => {
      const end = new Date()
      const start = new Date()
      // 开始时间提前三天
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
      // 结束时间三个月
      end.setTime(end.getTime() + 3600 * 1000 * 24 * 90)
      if (this.$refs["datePicker"]) {
        this.$refs["datePicker"].$emit("pick", [start, end])
      }
      this.meettimerange = [formatDate(start, "yyyy-MM-dd"), formatDate(end, "yyyy-MM-dd")]
      this.meetTimeChange(this.meettimerange)
      this.doSearch(this.queryParam)
    })
  }
}
</script>

<style lang="scss" scoped>
.tl-search-form > .el-form-item {
  margin-right: 10px;
}
</style>
